<script setup>
import { reactive } from "vue";
const data = reactive({
  mobile: "", // 手机号码
  sms_code: "", // 手机验证码
  password: "", // 密码
});
</script>
<template>
  <div class="wmima">
    <header>
      <van-icon name="arrow-left" @click="$router.back()" />
      <h3>找回密码</h3>
    </header>
    <van-cell-group inset>
      <van-field v-model="data.mobile" placeholder="请输入手机号" />
      <span class="ma">获取验证码</span>
    </van-cell-group>
    <van-cell-group inset>
      <van-field v-model="data.sms_code" placeholder="请输入验证码" />
    </van-cell-group>
    <van-cell-group inset>
      <van-field v-model="data.password" placeholder="请输入密码" />
    </van-cell-group>
    <!-- 登录 -->
    <p class="goLogin">
      <button>登录</button>
    </p>
  </div>
</template>
<style lang="scss" scoped>
.wmima {
  // overflow: hidden;
  header {
    height: 88px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    .van-icon {
      width: 60px;
      height: 60px;
      text-align: center;
    }
    h3 {
      flex: 1;
      text-align: center;
      font-size: 36px;
    }
  }
  .van-cell-group {
    display: flex;
    align-items: center;
    .ma {
      width: 280px;
      text-align: center;
      font-size: 24px;
      margin-right: 30px;
      height: 0.8rem;
      line-height: 0.8rem;
      background: #f15a24;
      border-radius: 0.04rem;
      color: #fff;
    }
    .van-icon {
      color: orange;
    }
    img {
      width: 20%;
      height: 60px;
      margin-top: 20px;
    }
  }
  .van-field {
    // background: blue;
    width: 100%;
  }
  :deep(.van-cell__title) {
    color: red;
    margin: 0;
  }
  .goLogin {
    text-align: center;
    button {
      width: 80%;
      height: 88px;
      background: #f15a24;
      border-radius: 0.10667rem;
      border: 0;
      margin-top: 0.6rem;
      font-size: 0.45333rem;
      font-weight: 400;
      color: #fff;
      outline: none;
      line-height: 1.2rem;
    }
  }
}
</style>
